<template>
  <view viewport>
    <view class="card">
      <view class="row_container">
        <view class="row_container_title">品牌:</view>
        <view class="right-content">{{detail.brand}}</view>
      </view>
      <view class="line"></view>
      <view class="row_container">
        <view class="row_container_title">型号:</view>
        <view class="right-content">{{detail.model}}</view>
      </view>
      <view class="line"></view>
      <view class="row_container">
        <view class="row_container_title">对标型号:</view>
        <view class="right-content">{{detail.benchmarkingModel}}</view>
      </view>
      <view class="line"></view>
      <view class="row_container">
        <view class="row_container_title">价格:</view>
        <view class="right-content">{{detail.price}}</view>
      </view>
      <view class="line"></view>
      <view class="row_container">
        <view class="row_container_title">热度:</view>
        <view class="right-content">{{detail.popular}}</view>
      </view>
      <view class="line"></view>
      <view class="row_container">
        <view class="row_container_title">销售区域:</view>
        <view class="right-content">{{detail.areaFullName}}</view>
      </view>
      <view class="line"></view>
      <view class="row_container">
        <view class="row_container_title">备注:</view>
        <view class="right-content">{{detail.memo}}</view>
      </view>
      <view class="line"></view>
      <view class="row_container">

        <view class="row_container_title">照片:</view>
      </view>
      <view v-if="images.length>0" class="container_upload_img">
        <view class="item_upload_view" v-for="(imageItem, index) in images" :key="index">
          <image class="item_upload_img"
            :src="imageItem.isAdd?'../../static/inspection/icon_camera.png':imageItem.fileUrl"
            @click="tagClick(imageItem)">
          </image>

        </view>
      </view>
      <view class="no_data_text" v-else>暂无图片</view>


    </view>

    <view class="bottom-contianer">
      <button class="button_normal" @click="cancel">关闭</button>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { getClCompetitor } from '@/services/competition'
  import { getAttachUrl } from '@/services/file'
  import { baseURL } from '@/utils/http'
  import Func from '@/utils/func'

  const detail = ref<any>(null)

  // 图片集合
  const images = ref<any>([])

  // 获取页面参数
  const query = defineProps<{
    data ?: string
  }>()

  const popularArray = ref([{ key: '高', value: 1 }, { key: '中', value: 2 }, { key: '低', value: 3 }]);

  // 根据 value 数组获取对应的 key，并用逗号分隔
  function getKeysByValues(values : number[]) : string {
    return popularArray.value
      .filter(item => values.includes(item.value)) // 筛选出 value 匹配的项
      .map(item => item.key)                       // 提取 key
      .join(',');                                  // 用逗号分隔
  }

  onLoad(() => {
    if (query.data) {
      const data = JSON.parse(query.data);
      //获取详情接口
      getClCompetitor({ clCompetitorId: data.competitorId }).then((res : any) => {
        console.log(res)
        const popular = getKeysByValues([res.popular]);
        res.popular = popular
        detail.value = res
        // 获取图片计划
        const fileCodes = res.attachIds;
        if (Func.notEmpty(fileCodes)) {
          const fileArray = Func.split(fileCodes);
          fileArray.forEach(e => {
            images.value.push({
              fileUrl: e,
              fileName: ''
            })
          })
        }
      })
    }

  })
  //图片展示
  const tagClick = (item : any) => {
    console.log(item)

    var urls = []
    urls.push(item.fileUrl)
    uni.previewImage({
      urls: urls,
      current: 0,
      success: () => { },
      fail: () => { },
      complete: () => { },
    });

  }
  const cancel = () => {
    uni.navigateBack()
  }
</script>

<style lang="scss">
  page {
    background-color: #F9FAFB;
  }

  .viewport {
    display: flex;
  }

  .card {
    margin: 40rpx 20rpx;
    background: #FFFFFF;
    display: flex;
    padding: 24rpx;
    flex-direction: column;
    // box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(209, 227, 230, 0.58);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .row_container {
    margin-top: 24rpx;
    margin-bottom: 24rpx;
    margin-left: 5rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .row_container_title {
    font-size: 30rpx;
    color: #1C253A
  }

  .row_container_content {
    font-size: 30rpx;
    margin-left: 15rpx;
    color: #394259
  }

  .line {
    background-color: #F2F3F5;
    height: 1rpx;
  }

  .no_data_text {
    margin-top: 30rpx;
    color: darkgray;
    font-size: 30rpx;
  }

  .row_container_content_red {
    font-size: 30rpx;
    margin-left: 15rpx;
    color: #E02020
  }

  .bottom-contianer {
    margin-top: 30rpx;
    width: 100%;
    z-index: 99;
    display: flex;
    flex-direction: row;
  }

  .button {
    width: 45%;
    background-color: #54B9CC;
    color: white;
    font-size: 32rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .button_normal {
    width: 45%;
    color: #54B9CC;
    font-size: 32rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    border: 2rpx solid #54B9CC;
  }

  .right-content {
    height: 40rpx;
    flex-grow: 1;
    margin-left: 25rpx;
    margin-right: 10rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: rgba(28, 37, 58, 0.65);
    line-height: 40rpx;
    text-align: right;
    font-style: normal;
    text-transform: none;
  }

  .case-item {

    border-radius: 16rpx 16rpx 16rpx 16rpx;
    justify-content: center;
    flex-direction: column;
    padding-bottom: 15rpx;
    padding-top: 15rpx;
    align-items: center;
    box-sizing: border-box;
    border-radius: 8rpx;
    background-color: #F9FAFB;


    .image_container {
      position: relative;
      width: 100%;
      height: fit-content;
      box-sizing: border-box;
      border-radius: 16rpx;
      border: 4rpx solid #00C1D1;
      overflow: hidden;
      /* 设置溢出隐藏 */

      .image_good {
        width: 100%;
        height: 320rpx;
      }

      .tag {
        text-align: center;
        line-height: 40rpx;
        height: 40rpx;
        width: 160rpx;
        left: 0;
        top: 0;
        color: white;
        font-size: 24rpx;
        position: absolute;
        border-top-left-radius: 16rpx;
        border-bottom-right-radius: 16rpx;
        background-color: #00C1D1;
      }

    }

    .text {
      text-align: left;
      margin-top: 40rpx;
      font-size: 24upx;
      color: #3d3d3d;
    }
  }

  .container_upload_img {
    width: 93vw;
    display: flex;
    margin-left: 20rpx;
    margin-top: 10rpx;
    row-gap: 15rpx;
    column-gap: 12rpx;
    flex-wrap: wrap;


  }

  .item_upload_view {
    position: relative;
    display: flex;
    margin: 10rpx 5rpx;
    align-items: flex-end;
  }

  .item_delete {
    position: absolute;
    right: 2rpx;
    top: 2rpx;
    z-index: 100;
    width: 40rpx;
    height: 40rpx;
  }

  .item_upload_img {
    width: 40vw;
    height: 176rpx;
    font-size: 28upx;
    color: #1685fb;
    text-decoration: underline
  }
</style>
